<template>
  <div>
    学生添加请假信息
    <van-form @failed="onFailed">
      <van-field v-model="formData.teacher_name" is-link readonly name="picker" label="辅导员" placeholder="请选择辅导员"
        @click="showTeacher = true" />
      <van-popup v-model:show="showTeacher" position="bottom">
        <van-picker :columns="teachers" @confirm="onConfirmTeacher" @cancel="showTeacher = false" />
      </van-popup>

      <van-field v-model="formData.type_name" is-link readonly name="picker" label="请假类型" placeholder="请假类型"
        @click="showType = true" />
      <van-popup v-model:show="showType" position="bottom">
        <van-picker :columns="types" @confirm="onConfirmType" @cancel="showType = false" />
      </van-popup>

      <van-field name="uploader" label="请假图片">
        <template #input>
          <van-uploader v-model="formData.images" />
        </template>
      </van-field>
      <van-field v-model="formData.start_time" is-link readonly name="calendar" label="起始时间" placeholder="点击选择日期"
        @click="showCalendar1 = true" />
      <van-calendar v-model:show="showCalendar1" @confirm="onConfirmStart" />

      <van-field v-model="formData.end_time" is-link readonly name="calendar" label="结束时间" placeholder="点击选择日期"
        @click="showCalendar2 = true" :rules="[{ validator, message: '请假原因必填' }]"/>
      <van-calendar v-model:show="showCalendar2" @confirm="onConfirmEnd" />

      <van-cell-group>
        <van-field v-model="formData.instructions" rows="2" autosize label="请假原因" type="textarea" maxlength="50"
          placeholder="请输入留言" show-word-limit :rules="[{ validator, message: '请假原因必填' }]"/>
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          添加
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';


const formData = reactive({
  teacher_id: -1,
  teacher_name: '',
  instructions: '请假原因',
  images: [],
  type_id: -1,
  type_name: '',
  status: 0,
  start_time: '',
  end_time: ''
})

const showTeacher = ref(false);
const showType = ref(false);
const showCalendar1 = ref(false);
const showCalendar2 = ref(false);


const teachers = [
  { text: '张老师', value: 'Hangzhou' },
  { text: '李老师', value: 'Ningbo' },
  { text: '王老师', value: 'Wenzhou' }
];
const types = [
  { text: '病假', value: '1' },
  { text: '事假', value: '2' },
  { text: '其他', value: '3' }
];

const validator = (str) => {
  return str.trim().length > 0
}

const onConfirmTeacher = ({ selectedOptions }) => {
  formData.teacher_id = selectedOptions[0]?.value;
  formData.teacher_name = selectedOptions[0]?.text;
  showTeacher.value = false;
};
const onConfirmType = ({ selectedOptions }) => {
  formData.type_id = selectedOptions[0]?.value;
  formData.type_name = selectedOptions[0]?.text;
  showType.value = false;
};

const onConfirmStart = (date) => {
  formData.start_time = `${date.getMonth() + 1}/${date.getDate()}`;
  showCalendar1.value = false;
};
const onConfirmEnd = (date) => {
  formData.end_time = `${date.getMonth() + 1}/${date.getDate()}`;
  showCalendar2.value = false;
};

const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
</script>
